<template>
  <view class="root" :style="{ paddingTop: `${statusHeight + 44}px` }">
    <view
      :style="{
        boxSizing: `content-box`,
        paddingTop: `${statusHeight}px`,
        height: `44px`,
        backgroundImage: `linear-gradient(90deg, #8ec5fc, #4388e7)`,
      }"
      class="fd-row ai-center fixed top-0 left-0 width-100vw"
    >
      <navigator
        open-type="navigateBack"
        hover-class="navigator-hover"
        class="pl-30 pr-30"
      >
        <icons class="text-left" color="#fff" type="arrowleft" size="24" />
      </navigator>

      <text
        :style="{ left: `21%`, right: `21%` }"
        class="absolute text-center fs-32 fw-700 color-fff"
      >
        收货地址管理
      </text>
    </view>

    <view class="header" />

    <view class="main">
      <view
        v-for="(item, index) in addressList"
        :key="index"
        @click="chooseAddress(index)"
        class="section bgc-fff mb-50"
      >
        <label class="jc-sb pb-30 bb-eb fs-28 color-333 fw-500">
          <text>{{ item.username }}</text>
          <text>{{ item.usermobile }}</text>
        </label>
        <text class="fs-22 color-666 mt-30 lh-30">{{ item.address }}</text>
        <view class="fs-24 mt-50 fd-row ai-center jc-sb">
          <label @click.stop="setDefault(index)" class="ai-center">
            <radio color="#4388e7" :checked="Boolean(item.status)" />
            <text class="color-4388e7">默认地址</text>
          </label>
          <view class="fd-row color-333">
            <view
              @click.stop="goto(index)"
              hover-class="btn-hover"
              class="ai-center fd-row"
            >
              <image
                class="width-32 height-34"
                src="/static/imgs/icon-edit.png"
              />
              <text class="ml-12">编辑</text>
            </view>
            <view
              hover-class="btn-hover"
              @click.stop="deleteAddress(index)"
              class="ml-40 ai-center fd-row"
            >
              <image
                class="width-32 height-32"
                src="/static/imgs/icon-delete0.png"
              />
              <text class="ml-12">删除</text>
            </view>
          </view>
        </view>
      </view>
      <text
        v-if="!addressList.length"
        class="color-fff fs-28 ml-18 text-center"
      >
        您还没有添加过收货地址...
      </text>
    </view>

    <navigator
      url="/pages/address"
      :style="{
        lineHeight: 2.5,
        margin: `60px 30px`,
        backgroundImage: `linear-gradient(90deg, #8ec5fc, #4388e7)`,
      }"
      hover-class="navigator-hover"
      class="color-fff fs-32 text-center br-20"
    >
      新增地址
    </navigator>
  </view>
</template>

<script>
  import icons from "@/components/icons";
  export default {
    components: { icons },
    data: () => ({
      addressList: [],
      statusHeight: uni.getSystemInfoSync().statusBarHeight,
    }),
    onLoad({ pageName }) {
      this.pageName = pageName;
    },
    onShow() {
      uni.showLoading({ title: "Loading...", mask: true });
      uni.fetch("/api/address/lists", {
        success: (res) => {
          this.addressList = res;
          uni.hideLoading();
        },
      });
    },
    methods: {
      setDefault(index) {
        if (this.addressList[index].status) return;
        this.addressList.forEach((element) => {
          element.status = 0;
        });
        this.addressList[index].status = 1;
        uni.fetch("/api/address/edit", {
          data: {
            addressId: this.addressList[index].addressId,
            status: 1,
          },
        });
      },
      goto(index) {
        uni.navigateTo({
          url: `/pages/address?id=${this.addressList[index].addressId}`,
        });
      },
      chooseAddress(index) {
        if (this.pageName != "pre-order") return;
        uni.$emit("updateAddressInfo", {
          msg: "更新地址信息",
          addressInfo: this.addressList[index],
        });
        uni.navigateBack();
      },
      deleteAddress(index) {
        uni.showModal({
          title: "提示",
          content: "确定要永久删除这个地址吗？",
          success: (res) =>
            res.confirm &&
            uni.fetch("/api/address/del", {
              data: {
                addressId: this.addressList[index].addressId,
              },
              success: (res) => {
                this.addressList.splice(index, 1);
                uni.showToast({ title: "已删除" });
              },
            }),
        });
      },
    },
  };
</script>

<style>
  .header {
    z-index: 0;
    height: 66px;
    border-radius: 0 0 30% 30%;
    background-image: linear-gradient(90deg, #8ec5fc, #4388e7);
  }

  .main {
    z-index: 1;
    margin-top: -44px;
    padding: 0 30rpx;
  }

  .section {
    box-shadow: 0 5rpx 20rpx 0 rgba(151, 166, 192, 0.22);
    border-radius: 20rpx;
    padding: 30rpx 25rpx;
  }

  .bb-eb {
    border-bottom: 1rpx solid #ebebeb;
  }
</style>
